<template>
    <view class="content">
        <view class="title text-lg">盘点计划</view>
        <view class="box">
            <view class="item">
                <view>计划名称</view>
                <view class="item-r">
                    <input type="text" v-model="plan" placeholder="请输入" class="inp" :disabled="disabled">
                </view>
            </view>
            <view class="item">
                <view>负责人</view>
                <view class="item-r" @click="open(1)">
                    <input type="text" v-model="name" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                </view>
            </view>
            <view class="item">
                <view>计划时间</view>
                <view class="item-r" @click="open(2)">
                    <input type="text" v-model="planTime" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                </view>
            </view>
        </view>
        
        <view class="title text-lg">盘点子计划</view>
        <view v-for="(el, ind) in list" :key="ind">
            <view class="box">
                <view class="item" @click="openChild(el, 1)">
                    <view>开始时间</view>
                    <view class="item-r">
                        <input type="text" v-model="el.pbegin" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                    </view>
                </view>
                <view class="item" @click="openChild(el, 2)">
                    <view>结束时间</view>
                    <view class="item-r">
                        <input type="text" v-model="el.pend" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                    </view>
                </view>
                <view class="item" @click="openChild(el, 3)">
                    <view>负责人</view>
                    <view class="item-r">
                        <input type="text" v-model="el.sub_member" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                    </view>
                </view>
                <view class="item" @click="openChild(el, 4)">
                    <view>库区</view>
                    <view class="item-r">
                        <input type="text" v-model="el.category" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#a7a7a7" size="28" class="u-m-l-15"></u-icon>
                    </view>
                </view>
            </view>
            <view class="btns" v-if="!id">
                <view class="del-btn" v-if="list.length > 1" @click="del(ind)">
                    <image src="../../static/icon/del.png" class="btn-icon"></image>
                    <view>删除</view>
                </view>
                <view class="add-btn" @click="add">
                    <image src="../../static/icon/add.png" class="btn-icon"></image>
                    <view>添加</view>
                </view>
            </view>
        </view>
        
        <view class="btn-square u-m-t-30" v-if="!id" @click="$noMultipleClicks(doSubmit)">确认</view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        <u-picker v-model="JHtimeShow" mode="time" :params="timeParams" @confirm="chooseTime(3, $event)"></u-picker>
        
        <!-- 库区 -->
        <u-select v-model="show" mode="single-column" :list="house" value-name="id" label-name="name" @confirm="confirm"></u-select>
        <!-- 负责人 -->
        <u-select v-model="nameShow" mode="single-column" :list="nameList" value-name="id" label-name="nickname" @confirm="confirmName"></u-select>
        <u-select v-model="nameShow2" mode="single-column" :list="nameList" value-name="id" label-name="nickname" @confirm="confirmChildName"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                plan: '',
                name: '',
                nameId: '',
                planTime: '', //计划时间
                JHtimeShow: false, //计划时间
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                timeParams: { year: true, month: true, day: true, hour: false, minute: false, second: false },
                nameShow: false,
                nameShow2: false,
                nameList: [],
                show: false,
                house: [],//库区
                disabled: false,
                id: '',
                data: {},
                list: [{pbegin:'', pend:'', category_id:'', category:'', sub_member_id:'', sub_member:''}],
                listItem: {},
            };
        },
        onLoad(option) {
            if (option.id) {
                uni.setNavigationBarTitle({
                	title:'库存盘点计划'
                })
                this.id = option.id
                this.disabled = true
                
            }
            this.getHouse()
            this.getMember()
        },
        methods: {
            doSubmit() {
                if (!this.plan) {
                    this.$toast('请输计划名称');
                    return
                }
                if (!this.nameId) {
                    this.$toast('请选择负责人');
                    return
                }
                if (!this.planTime) {
                    this.$toast('请选择计划时间');
                    return
                }
                let isNull = false
                this.list.forEach(cur => {
                    if (!cur.pbegin || !cur.pend || !cur.category_id || !cur.sub_member_id) {
                        isNull = true
                    }
                })
                if (isNull) {
                    this.$toast('子计划有未填写的项目，请填写完整！');
                    return
                }
                
                this.$ajax('inventorys/add_plan', {
                    userToken: this.$getSync('userToken'),
                    name: this.plan,//计划名称
                    member_id: this.nameId,//负责人编号
                    member: this.name,//负责人
                    plan_time: this.planTime,//计划时间
                    sub_plan: this.list,//[pbegin-子计划开始时间, pend-子计划结束时间, category_id-负责范围（库区）编号, category-负责范围, sub_member_id-子计划负责人编号, sub_member-子计划负责人]
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            // 打开子计划弹窗
            openChild(el, num) {
                this.listItem = el
                if (num == 1) {
                    this.KStimeShow = true
                } else if (num == 2) {
                    this.JStimeShow = true
                } else if (num == 3) {
                    this.nameShow2 = true
                } else if (num == 4) {
                    this.show = true
                }
            },
            
            open(num) {
                if (num == 1) {
                    this.nameShow = true
                } else if (num == 2) {
                    this.JHtimeShow = true
                }
            },
            
            // 添加
            add() {
                this.list.push({pbegin:'', pend:'', category_id:'', category:'', sub_member_id:'', sub_member:''})
            },
            
            // 删除
            del(ind) {
                this.list.splice(ind, 1)
            },
            
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.listItem.pbegin = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.listItem.pend = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 3) {
                    this.planTime = e.year + '-' + e.month + '-' + e.day;
                }
            },
            
            // 选择负责人
            confirmChildName(e) {
                console.log(e);
                this.listItem.sub_member = e[0].label
                this.listItem.sub_member_id = e[0].value
            },
            
            // 选择计划负责人
            confirmName(e) {
                console.log(e);
                this.name = e[0].label
                this.nameId = e[0].value
            },
            
            // 获取负责人
            getMember() {
            	this.$ajax('index/get_member', {
                    userToken: this.$getSync('userToken'),
                    keywords: '',
                    page: 1,
                    limit: 9999,
                }).then(ret => {
            		if (ret.status == 0) {
                        this.nameList = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 选择库区
            confirm(e) {
                console.log(e);
                this.listItem.category = e[0].label
                this.listItem.category_id = e[0].value
            },
            
            // 获取库区
            getHouse() {
            	this.$ajax('index/get_stores_house', {
                    userToken: this.$getSync('userToken'),
                }).then(ret => {
            		if (ret.status == 0) {
                        this.house = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5 !important;
    }
    .content{
        padding: 0 30rpx 30rpx;
    }
    .title{
        font-weight: bold;
        padding: 45rpx 20rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 0rpx;
        bottom: 32rpx;
    }
    .box{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        // margin-bottom: 20rpx;
    }
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
        padding-left: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        flex: 1;
    }
    
    .btns{
        padding: 20rpx 0 35rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btns>view{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15rpx 30rpx;
        border-radius: 10rpx;
    }
    .btn-icon{
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
    }
    .del-btn{
        background-color: #bfbfbf;
    }
    .add-btn{
        background-color: #ff4800;
        margin-left: 20rpx;
    }

</style>
